<template>
  <div class="cartbox">
    <div class="head">
      <span>30天无忧退货</span>
      <span>48小时快速退款</span>
      <span>满88元免邮费</span>
    </div>
  <!-- 商品列表信息 -->
  <div class="item">
    <div class="items" v-for="item in cartsList" :key="item.id">
      <!-- <div class="items-box">
        <van-checkbox v-model="isSelect" @change="selectCar"/>
       <div class="img"><img :src="item.list_pic_url" alt=""></div>
       <div class="info">
         <p>{{item.goods_name}}</p>
         <p>￥{{item.retail_price}}</p>
       </div>
       <div class="right">X{{item.number}}</div>
      </div>
       <div class="del" @click="deleteItem">删除</div> -->
       <van-checkbox v-model="item.isChecked"/>
        <van-swipe-cell :before-close="beforeClose">
        <van-card
          :num="item.number"
          :price="item.retail_price"
          :title="item.goods_name"
          class="goods-card"
          :thumb="item.list_pic_url"/>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
    </div>
  </div>
    <!--购物车收货订单栏  -->
    <div class="submitcar">
      <div class="submitcar-l">
         <van-checkbox v-model="isAllChcked">全选</van-checkbox>
      </div>
      <div class="submitcar-r">
        <p class="submitcar-r-t">￥{{total}}</p>
        <p class="submitcar-r-b" @click="onSubmit">下单</p>
      </div>
    </div>
    <van-tabbar route>
      <!-- replace 跳转是否替换当前页面 -->
      <!-- to 跳转路由 -->
      <van-tabbar-item replace to="/home" icon="wap-home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/topic" icon="description"
        >专题</van-tabbar-item
      >
      <van-tabbar-item replace to="/category" icon="apps-o"
        >分类</van-tabbar-item
      >
      <van-tabbar-item replace to="/cart" icon="shopping-cart-o"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item replace to="/my" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { deleteAction, cartList } from "@/api/cart/cart.js";
import {detailAction,submitAction} from "@/api/cart/order.js";
import { Dialog } from 'vant';
// import { component } from 'vue/types/umd';
export default {
  data() {
    return {
      //商品总价
      // total:0,
      isSelect:false,
      // allSelect: false,
      cartsList:{},
      goodsId:'1459',
      id:'1'
    };
  },
  methods: {
    getcartList() {
      //购物车列表
      cartList({
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        res.data.forEach(element=>{
          element.isChecked=false;
        })
        this.cartsList=res.data
      });
      //删除购物车
      deleteAction({
        id:this.id
      }).then(res=>{
        console.log(res)
      });
      //提交订单
      submitAction({
        allPrise:total,
        goodsId:this.goodsId,
        openId: localStorage.getItem("openId"),
      }).then(res=>{
        console.log(res)
      })
    },
    //点击按钮产生的回调
    onSubmit() {
      this.$router.push({name:'order'})
    },
    //删除商品
    deleteItem(){

    },
    //控制删除
    beforeClose({ position, instance }) {
      // console.log(position, instance)
      switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          break;
        case 'right':
        Dialog.confirm({
          title: '标题',
          message: '弹窗内容',
          })
          .then(() => { 
            this.cartsList.forEach((item,index)=>{
                // console.log(item,index)
                // console.log(item.id) 
            });
            // on confirm
          })
          .catch(() => {
            // on cancel
            });
          break;
      }
    },
    //点击上面的单选
    selectCar(){
      this.isSelect=!this.isSelect
    },
    //全选
    AllselectCar(){

    }
  },
  computed:{
    isAllChcked:{
      get(){
        return this.cartsList.every(ele=>ele.isChecked)
      },
      set(l){
        console.log(l)
        if(l){
          this.cartsList.forEach(el=>{
            el.isChecked=true;
          })
        }else{
          this.cartsList.forEach(el=>{
            el.isChecked=false;
          })
        }
      }
    },
    total(){
      return this.cartsList.reduce((total,cur)=>{
        if(cur.isChecked){
            return total+cur.retail_price*cur.number;
        }else{
          return total;
        }
      },0)
    }
  },
  created() {
    this.getcartList();
  },

};
</script>
<style scoped>
.goods-card {
    margin: 0;
    width: 100%;
    background-color:#fff;
  }

  .delete-button {
    height: 100%;
  }
</style>
<style lang="scss" scoped>
.cartbox {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  .head {
    display: flex;
    justify-content: space-between;
    padding: 15px 10px;
  }
  .item{
    width: 100%;
    margin-top: 10px;
    margin-bottom:90px;
    .items{
      background-color: #fff;
      padding:15px  10px;
      // width: 100%;
      height: 95px;
      margin-bottom: 5px;
      // overflow: auto;
      .img{
        float: left;
        width: 65px;
        height: 65px;
        margin-top: 20px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .info{
        width: 60%;
        float: left;
        margin-top: 20px;
        p{

        }
      }
      .right{
        width: 10%;
        height: 100%;
        line-height: 95px;
        float: left;

      }
      .del{
        float: left;
        width: 10%;
        height: 100%;

      }
       .van-checkbox{
      height: 100%;
      float: left;
    //  margin-top:35px;
      padding:0 10px;  
    }
    } 
  }
  .submitcar {
    position: fixed;
    bottom: 50px;
    height:50px;
    width: 100%;
    background-color: #fff;
    .submitcar-l{
      float: left;
      width: 20%;
      margin-top:15px;
      padding-left: 10px;
    }
    .submitcar-r{
      float: right;
      width: 40%;
      height: 100%;
      .submitcar-r-t{
        float: left;
        color: #b4282d;
      }
      .submitcar-r-b{
        float: right;
          width:70%;
          height: 100%;
          color: #fff;
          margin: 0;
          text-align: center;
          line-height: 50px;
          font-size: 16px;
          background-color:#b4282d;
      }
    }
  }
}
</style>